/*注释掉的大框写在index.css里*/
/*.dog-menu{*/
    /*width:2rem;height:4rem;position: absolute;*/
    /*left:0;right:0;top:0;bottom:0;margin:auto;*/
/*}*/
.dog-header{
    width:1.2rem;height:auto;position: relative;margin:0 auto;background: #cdb7a5;
    z-index: 12;
}
.dog-header span{
    display: block;
}
.dog-header span:nth-child(1){
    width:0.5rem;height:0.3rem;border-radius: 50%;background: #563930;
    transform: rotate(-45deg);position: absolute;left:0;top:0;
}
.dog-header span:nth-child(2){
    width:0.4rem;height:0.3rem;border-radius: 50%;background: #563930;
    transform: rotate(20deg);position: absolute;left:0.2rem;top:-0.06rem;
}
.dog-header span:nth-child(3){
    width:0.5rem;height:0.3rem;border-radius: 50%;background: #563930;
    transform: rotate(45deg);position: absolute;right:-0.2rem;top:0;
}
.dog-header span:nth-child(4){
    width:0.4rem;height:0.3rem;border-radius: 50%;background: #563930;
    transform: rotate(-20deg);position: absolute;right:0    ;top:-0.06rem;
}
/*涓婅剳琚�*/
.dog-header-top{
    width:1rem;height:0.7rem;background: #cdb7a5;position: relative;
    margin:0 auto;top:0.1rem;left:0.1rem;z-index: 10;
    border-radius: 0.4rem 0.4rem 0.25rem 0.25rem;
}
.dog-header-top .ht-left{
    width:0.23rem;height:0.04rem;background: #563930;border-radius: 1px;
    position: absolute;left:0.1rem;top:0.3rem;
    /*transform:rotate(-20deg);*/
    animation: zuomeimao .5s ease 2s infinite;
}
.dog-header-top .ht-right{
    width:0.23rem;height:0.04rem;background: #563930;border-radius: 1px;
    position: absolute;right:0.1rem;top:0.3rem;
    /*transform:rotate(10deg);*/
    animation: youmeimao .5s ease 2s infinite;
}
/*鐪肩潧*/
.dog-header-top .ht-zuoyan{
    width:0.12rem;height:0.2rem;position: absolute;left:0.14rem;top:0.4rem;
    background: #a3ebe8;border-radius: 50%;
    border:0.05rem solid #e9e9e9;
}
.dog-header-top .ht-zuoyan .zuoyan{
    width:0.1rem;height:0.2rem;position: absolute;left:0.02rem;top:0.02rem;
    background: #050505;border-radius: 50%;
    animation: yanjing 1s linear 1.5s infinite;
}
.dog-header-top .ht-zuoyan .zuoyan:before{
    content:"";display: inline-block;
    width:0.05rem;height:0.05rem;position: absolute;left:0.02rem;top:0.04rem;
    background: #fff;border-radius: 50%;
}
.dog-header-top .ht-youyan{
    width:0.12rem;height:0.2rem;position: absolute;right:0.14rem;top:0.4rem;
    background: #a3ebe8;border-radius: 50%;
    border:0.05rem solid #e9e9e9;
}
.dog-header-top .ht-youyan .youyan{
    width:0.1rem;height:0.2rem;position: absolute;left:0.02rem;top:0.02rem;
    background: #050505;border-radius: 50%;
    animation: yanjing 1s linear 1.5s infinite;
}
.dog-header-top .ht-youyan .youyan:before{
    content:"";display: inline-block;
    width:0.05rem;height:0.05rem;position: absolute;left:0.02rem;top:0.04rem;
    background: #fff;border-radius: 50%;
}
/*涓嬪ご鑴�*/
.dog-header-bottom{
    width:1.06rem;height:0.9rem;position: relative;left:0.54rem;z-index: 8;
    top:-0.24rem;
    background: #cdb7a5;border-radius:50% 50% 30% 30%;
}
.dog-header-bottom:after{
    content:"";display: inline-block;
    width:0.4rem;height:0.7rem;position: absolute;left:-0.05rem;
    top:0.14rem;
    background: #cdb7a5;border-radius:60%;
}
.dog-header-bottom:before{
    content:"";display: inline-block;
    width:0.4rem;height:0.7rem;position: absolute;right:-0.06rem;
    top:0.14rem;
    background: #cdb7a5;border-radius:60%;
}
.dog-header-bottom .hb-top{z-index: 6;
    position: absolute;left:0.42rem;top:0.51rem;
    width:0.22rem;height:0.12rem;background: #563930;border-radius: 0.4rem;

}
.dog-header-bottom .hb-top:before{
    content:"";display: block;
    position: absolute;left:0.03rem;top:0.03rem;
    width:0.06rem;height:0.06rem;background: #89756e;border-radius: 50%;
}
.dog-header-bottom .hb-bottom{z-index: 5;
    width:0.5rem;height:0.4rem;position: absolute;left:0.29rem;top:0.41rem;
    background: #f8f5f4;border-radius:100% 100% 50% 50% ;
}
.dog-header-bottom .hb-bottom:before{
    content:"";display: block;
    width:0.4rem;height:0.4rem;position: absolute;left:-0.04rem;top:0.08rem;
    background: #f8f5f4;border-radius:50% 50% 100% 50%;
    transform: rotate(26deg);
}
.dog-header-bottom .hb-bottom:after{
    content:"";display: block;
    width:0.4rem;height:0.4rem;position: absolute;right:-0.04rem;top:0.08rem;
    background: #f8f5f4;border-radius:50% 50% 50% 100%;
    transform: rotate(-26deg);
}
/*鑸屽ご*/
.dog-shetou{
    width:0.16rem;height:0.7rem;position: absolute;left:0.45rem;top:0.44rem;
    z-index: 4;border-radius:0.3rem;
    background: linear-gradient(#ffc0cb,#ffc0cb,#ffc6cb);
    animation: naodai 2s linear .5s infinite;
}
/*韬綋----------------------*/
.dog-shenti{
    width:1.3rem;height:1.2rem;border-radius: 100% 100% 50% 50%;
    position: absolute;left:0.42rem;top:1rem;z-index: 2;
    background: #cdb7a5;
}
/*鐖瓙*/
.dog-zhuabox{
    width:1.2rem;height:0;
    position: absolute;left:0.46rem;top:1rem;
}
.st-top,.st-bot{
    width:0.36rem;height:0.22rem;background: #b8a392;
    position: absolute;top:0.6rem;z-index: 102;
    border-radius: 50% 50% 0 0;
}
.st-top:before,.st-bot:before{
    content:"";display: block;
    position: absolute;left:0;bottom:-0.08rem;
    width:33%;height:0.16rem;border-radius: 50%;
    background: #b8a392;
}
.st-top:after,.st-bot:after{
    content:"";display: block;
    position: absolute;left:33%;bottom:-0.08rem;
    width:33%;height:0.16rem;border-radius: 50%;
    background: #b8a392;
}
.st-top div,.st-bot div{
    position: absolute;right:0;bottom:-0.08rem;
    width:33%;height:0.16rem;border-radius: 50%;
    background: #b8a392;
}
.st-top{
    left:-0.18rem;
}
.st-bot{
    right:-0.18rem;
}
/*鏉″箙*/
.dog-title-box{
    width:1.9rem;height:2.4rem;
    position: absolute;left:0.1rem;top:1.76rem;z-index: 100;
    border-radius: .05rem;
    background: linear-gradient(to right bottom,#3f418a 10%,#532f63 20%,#3f418a 100%);
    /*background: url(../images/dogbg.png) no-repeat center center/cover;*/
}
.dog-title{
    width:90%;height:90%;position: absolute;color:#eee;font-size: 0.14rem;
    left:0;top:0.25rem;right:0;bottom:0;margin:auto;line-height: 0.2rem;
    overflow: hidden;
}
.dog-title span{
    font-size: 0.14rem;line-height: 0.28rem;display: block;float:left;letter-spacing: .01rem;
}

/*灏惧反*/
.dog-weiba{
    width:0.1rem;height:1.2rem;background: #563930;
    border-radius: 0.3rem;
    position: absolute;left:1.02rem;top:0.8rem;z-index: 1;
    transform: rotate(-50deg);
    transform-origin: left bottom;
    animation: weiba 1.2s linear 0s infinite;
}

/*涓婂崐韬姩鐢诲ぇ鐩掑瓙*/
.animate-top{
    width:98%;height:100%;
    position: absolute;left:0;top:1.9rem;
    animation: box 8s linear .5s infinite;
}
.dog-naodai{
    position: absolute;left:0;top:0;width:100%;height:100%;z-index: 5;
    animation: naodai 2s linear .5s infinite;
}
/*鐙楀瓙鍔ㄧ敾--------------------------------------------*/
@keyframes box {
    0%{top:1.6rem;}
    10%{top:0.7rem;}
    30%{top:0.7rem;}
    60%{top:0;}
    70%{top:0;}
    80%{top:0;}
    90%{top:0;}
    100%{top:1.8rem;}
}
@keyframes yanjing{
    0%{transform: translateX(0px);}
    40%{transform: translateX(-0.08rem);}
    70%{transform: translateX(0.08rem);}
    100%{transform: translateX(0px);}
}
@keyframes zuomeimao {
    0%{transform-origin: left bottom;transform: rotate(0deg) translateY(0);}
    100%{transform-origin: left bottom;transform: rotate(-26deg) translateY(0.02rem);}
}
@keyframes youmeimao {
    0%{transform-origin: right bottom;transform: rotate(0deg) translateY(0);}
    100%{transform-origin: right bottom;transform: rotate(22deg) translateY(0.02rem);}
}
@keyframes naodai {
    0%{transform: translateY(0);}
    10%{transform: translateY(-0.04rem);}
    20%{transform: translateY(0px);}
    30%{transform: translateY(0.04rem);}
    40%{transform: translateY(0px);}
    50%{transform: translateY(-0.04rem);}
    60%{transform: translateY(0px);}
    70%{transform: translateY(0.04rem);}
    80%{transform: translateY(0px);}
    90%{transform: translateY(-0.04rem);}
    100%{transform: translateY(0px);}
}
@keyframes shetou {
    0%{transform: translateY(0);}
    10%{transform: translateY(-0.5rem);}
    20%{transform: translateY(0px);}
    30%{transform: translateY(0.5rem);}
    40%{transform: translateY(0px);}
    50%{transform: translateY(-0.5rem);}
    60%{transform: translateY(0px);}
    70%{transform: translateY(0.5rem);}
    80%{transform: translateY(0px);}
    90%{transform: translateY(-0.5rem);}
    100%{transform: translateY(0px);}
}
@keyframes weiba {
    0%{transform: rotate(-50deg);}
    50%{transform: rotate(50deg);}
    100%{transform: rotate(0deg);}
}
